<template>
  <div class="yun-input" :style="{width:width,height:height}">
    <!--前置内容-->
    <input
      ref="input"
      @input="handleInput"
      :value="value"
      :placeholder="placeholder"

      type="text">

    <!--后置内容-->
    <div class="input-after"  v-if="words" >
      <span :style="{color:wordsColor}" class="words">{{words}}</span>
    </div>
    <div class="input-after" v-if="iconName" @click="clickSearch">
      <yun-icon :name="iconName"  :color="iconColor?iconColor:'#ccc'"  :hoverColor="iconHoverColor?iconHoverColor:'#F8A06F'"></yun-icon>
    </div>

  </div>
</template>

<script>
  import config from '../../../../action/config'

  export default {
    name: 'yunInput',

    props: {
      value: [String, Number],
      width:String,
      height:String,

      iconName:String,
      iconColor:String,
      iconHoverColor:String,

      words:String,
      wordsColor:String,
      placeholder:String,
    },

    data(){
      return{
      }
    },

    computed:{
      nativeInputValue() {
        return this.value === null || this.value === undefined ? '' : String(this.value);
      },
    },


    methods:{


      getInput() {
        return this.$refs.input;
      },

      setNativeInputValue() {
        const input = this.getInput();
        if (!input) return;

        if (input.value === this.nativeInputValue) return;
        input.value = this.nativeInputValue;
      },

      handleInput(event) {
        // should not emit input during composition
        // see: https://github.com/ElemeFE/element/issues/10516
        if (this.isComposing) return;

        // hack for https://github.com/ElemeFE/element/issues/8548
        // should remove the following line when we don't support IE
        if (event.target.value === this.nativeInputValue) return;
        this.$emit('input', event.target.value);
        this.$emit('change', event.target.value);
        // ensure native input value is controlled
        // see: https://github.com/ElemeFE/element/issues/12850
        this.$nextTick(this.setNativeInputValue);
      },

      clickSearch(){
        this.$emit(config.event.listenYunInputIcon,this.value);
      }
    },

    watch: {
      nativeInputValue() {
        this.setNativeInputValue();
      },
    },
  };
</script>


<style lang="scss" scoped>
  .yun-input{
    background-color:#F4F8FA;
    border-radius:4*$length;
    overflow: hidden;
    text-align: left;
    line-height: 1;
    @extend %flex-row-spb;
    > input {
      background-color:#F4F8FA;
      padding:9*$length 14*$length;
      line-height: 1;
      @include fontStyle(12,16,500,#999,start);
      height:auto;
    }

    .input-after{
      @extend %inlineBlockV;

      height:100%;
      display: inline-block;
      padding-right:14*$length;
      text-align: center;

      .icon{
        @extend %cursorPointer;
      }
      .words{
        @extend %cursorPointer;
        @include fontStyle(14,16,500,#666,start);
      }


    }
  }
</style>
